import { defineComponent } from "vue";
import MyButton from "./button";
import classes from "./demo.module.scss";

export default defineComponent({
  name: "ButtonDemo",
  setup() {
    const onMousedown = () => {
      console.log("鼠标长按事件");
    };
    /** 渲染函数 */
    return () => (
      <>
        {/* 默认按钮 */}
        <p class={classes.line}>
          <MyButton class="age age22" onMousedown={onMousedown}>
            默认按钮
          </MyButton>
          <MyButton type="primary">主要按钮</MyButton>
          <MyButton type="success">成功按钮</MyButton>
          <MyButton type="info">信息按钮</MyButton>
          <MyButton type="warning">警告按钮</MyButton>
          <MyButton type="danger">危险按钮</MyButton>
        </p>

        {/* 朴素按钮 */}
        <p class={classes.line}>
          <MyButton plain>朴素按钮</MyButton>
          <MyButton type="primary" plain>
            主要按钮
          </MyButton>
          <MyButton type="success" plain>
            成功按钮
          </MyButton>
          <MyButton type="info" plain>
            信息按钮
          </MyButton>
          <MyButton type="warning" plain>
            警告按钮
          </MyButton>
          <MyButton type="danger" plain>
            危险按钮
          </MyButton>
        </p>

        {/* 圆角按钮 */}
        <p class={classes.line}>
          <MyButton round>圆角按钮</MyButton>
          <MyButton type="primary" round>
            主要按钮
          </MyButton>
          <MyButton type="success" round>
            成功按钮
          </MyButton>
          <MyButton type="info" round>
            信息按钮
          </MyButton>
          <MyButton type="warning" round>
            警告按钮
          </MyButton>
          <MyButton type="danger" round>
            危险按钮
          </MyButton>
        </p>

        {/** 禁用状态 */}
        <p class={classes.line}>
          <MyButton disabled>禁用状态</MyButton>
          <MyButton type="primary" disabled>
            主要按钮
          </MyButton>
          <MyButton type="success" disabled>
            成功按钮
          </MyButton>
          <MyButton type="info" disabled>
            信息按钮
          </MyButton>
          <MyButton type="warning" disabled>
            警告按钮
          </MyButton>
          <MyButton type="danger" disabled>
            危险按钮
          </MyButton>
        </p>

        {/** 文字 */}
        <p class={classes.line}>
          <MyButton type="text">我是文字</MyButton>
          <MyButton type="text" disabled>
            我是文字
          </MyButton>
        </p>
      </>
    );
  },
});
